<template>
    <div>
            <van-row>
            <Hearders />
            <van-col span="4">
                <Left />
            </van-col>
            
            <van-col span="4" style="padding-top: 10px ;">
                <button>新增</button>&ensp;&ensp;
                <button>删除</button>&ensp;&ensp;
                <br>
                <br>
                <br>
                <!--参数配置-->
                <table>
                    <tr>
                        <td>事件</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="i in worklist" :key="i.id">
                        <td>{{i.name}}</td>
                        <td>
                            <button @click="peizhi(i.id,'ok')">参数配置</button>
                        </td>
                    </tr>
                </table>
            </van-col>
            <van-col span="16" style="padding-top: 10px ;">
                    <!-- {{name}}  <br> -->
                
                    <!-- {{typevalue}} <br> -->
                    <!-- {{datas}} -->
                    <div v-if="sta == 'ok'">
                    
                        
                        <table>
                            <tr v-for="(i,index) in lst" :key="index">
                                <td>
                                    <van-field :label="i.label" placeholder="请输入名称" v-model="name[index]" ></van-field>
                                </td>
                                <td>
                                    <select v-model="typevalue[index]">
                                        <option value="input">输入框</option>
                                        <option value="radio">单选框</option>
                                        <option value="checkbox">多选框</option>
                                        <option value="select">下拉框</option>
                                        <option value="datetime">日期</option>
                                        <option value="file">文件</option>
                                    </select>
                                </td>
                                <td>
                                    <van-field label="值" placeholder="请输入" v-model="value[index]"></van-field>
                                </td>
                                <td>
                                    <!--弹出框 数据展示-->
                                    <van-popup v-model:show="show" position="top" :style="{ height: '50%' }" >
                                            <select v-model="value1[index]">
                                                <option :value="j.mes" v-for="j in datas" :key="j.id" >{{j.name}}</option>
                                            </select>
                                            <br>

                                            <select v-model="value[index]">
                                                <option :value="k.name" v-for="k in value1[index]" :key="k.id" >{{k.name}}</option>
                                            </select>

                                    </van-popup>
                                        <!-- {{value}} <br> -->
                                    <van-cell is-link @click="showPopup(index)" style="width: 130px;" >添加数据源</van-cell>
                                </td>
                            </tr>
                        
                        </table>
                        <van-button @click="add">+</van-button>
                        <van-button>添加</van-button>
                    </div>
            </van-col>

            </van-row>
            
    </div>
</template>

<script>
import Hearders from '../comm/hearders'
import Left from '../comm/left.vue'
import axios from '../../http/axios'
    export default {
        components: { Hearders ,Left}, 
        data() {
            return {
                worklist:[],
                //申请id
                canshuid:0,
                //显示影藏
                sta:'',
                lst : [{'label':'名称'}],
                //下拉菜单类型
                typevalue:{},
                name:{},
                value:{},
                show: false,
                //数据源列表
                datas:[],
                value1:{}
                
            }
        },
        methods: {
            //获取工作流 配置参数
            getwork(){
                axios('/users/getwork/','get').then(res=>{
                    this.worklist = res.list
                })
            },
            //添加名称
            add(){
                this.lst.push({'label':'名称'})
            },
            //配置
            peizhi(id,sta){
                this.canshuid = id
                this.sta = sta
            },
            //弹出框自带
            showPopup(index) {
                this.show = true;
                localStorage.setItem('index',index)
                axios('/users/getorigin/','get').then(res=>{
                    this.datas = res.list
                    console.log(this.datas);
                    // let index = localStorage.getItem('index')
                    // this.value[index] = JSON.stringify(this.datas['mes'])
                })
            },
            //获取数据源
            getorigin(){
                
            },
            },
        mounted(){
            this.getwork()
            
        }
    }
</script>

<style scoped>

</style>